<template>
  <div class="selectRange">
    <el-form
      v-if="show"
      ref="SearchByTypeform"
      :model="row__"
      label-position="right"
      :disabled="isReadonly"
    >
      <el-form-item>
        <el-col style="padding-right: 20px" class="line flex col-center row-center" :span="8">
            <el-select
              v-model="row__.selected"
              placeholder="会员等级"
            >
              <el-option                    
              v-for="(o,i) in typeCollector.dateRange"
              :key="i" 
              :label="o.label" 
              :value="o.value"></el-option> 
            </el-select>
        </el-col>
        <el-col :span="7">
            <el-form-item prop="rangeStart" :rules="rules">
              <el-input 
              prop="rangeStart"
              v-model="row__.rangeStart" 
              maxlength="5"
              clearable 
              onkeyup="this.value = this.value.replace(/^0|[^\d]/g,'')"
              :placeholder="placeholder">
                <span slot="suffix" style="vertical-algin: middle">{{ unit }}</span>
              </el-input>
            </el-form-item>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
        <el-col :span="7">
            <el-form-item prop="rangeEnd" :rules="rules">
              <el-input 
              prop="rangeEnd"
              v-model="row__.rangeEnd" 
              maxlength="5"
              clearable 
              onkeyup="this.value = this.value.replace(/^0|[^\d]/g,'')"
              :placeholder="placeholder">
                <span slot="suffix" style="vertical-algin: middle">{{ unit }}</span>
              </el-input>
            </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'selectRange',
  props: ['A', 'B', 'C', 'unit', 'isReadonly', 'show'],
  computed: {
    ...mapGetters([
      'typeCollector'
    ])
  },
  watch: {
    A: {
      immediate: true,
      deep: true,
      handler (v) {
       this.row__.selected = v
      },
    },
    B: {
      immediate: true,
      deep: true,
      handler (v) {
        if(v) {
          this.row__.rangeStart = this.filter(v, '/')
        }
      },
    },
    C: {
      immediate: true,
      deep: true,
      handler (v) {
        if(v) {
          this.row__.rangeEnd = this.filter(v, '/')
        }
      },
    },
    show: {
      immediate: true,
      deep: true,
      handler (v) {
        if (!v) {
          Object.assign(this.row__, {selected: 7, rangeStart: '', rangeEnd: ''}) // 默认选择近7天
        }
      }
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  data () {
    return {
      placeholder: '输入大于0的数',
      rules: { required: true, message: '必填项', trigger: 'blur' },
      row__: {
        selected: 1,
        rangeStart: '',
        rangeEnd: ''
      },
    }
  },
  methods: {
    filter(v, s) {
      let u = this.unit == '元'
      if(s == '/') {
        return u ? v / 100 : v
      } else if(s == '*') {
        return u ? v * 100 : v
      }
    },
     doHandleRow__() {
      return new Promise((resolve, reject) => {
        this.$refs['SearchByTypeform'].validate((valid) => {
          let scope = this.row__.rangeStart - this.row__.rangeEnd
          if (scope >= 0) {
            this.$swal.error('输入范围不合理，请从新输入')
            resolve(false)
          } else if (valid) {
            this.$emit('update:A', this.row__.selected)
            this.$emit('update:B', this.filter(this.row__.rangeStart, '*'))
            this.$emit('update:C', this.filter(this.row__.rangeEnd, '*'))
            resolve(valid)
          }
        })
      })

    }
  }
}
</script>

<style lang="scss" scoped>
  .selectRange{
    display: flex;
  }
   ::v-deep .gird-left .el-input__inner{
    border-radius: 4px 0 0 4px;
  }
   ::v-deep .gird-right .el-input__inner{
    border-radius: 0px 4px 4px 0;
    border-left: none;
  }
</style>
